<script>

</script>

<template>
<nav>
  <ul class="flex space-x-2">
    <li><RouterLink to="/">Home</RouterLink></li>
    <li><RouterLink to="/login">Login</RouterLink></li>
    <li><RouterLink to="/about">About</RouterLink></li>
  </ul>
  <RouterView v-slot="{Component}">
   <transition name="fade" mode="out-in">
    <KeepAlive>
      <component :is="Component" />
    </KeepAlive>
  </transition>
  </RouterView>
</nav>

</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
